<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      title="建议详情"
      width="80%"
      placement="right"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="卡券编号">{{
            details.couponCode
          }}</a-descriptions-item>
          <a-descriptions-item label="卡券名称">{{
            details.name
          }}</a-descriptions-item>
          <a-descriptions-item label="卡券类别">{{
            couponCategoryArr[details.couponCategory - 1]
          }}</a-descriptions-item>
          <a-descriptions-item label="使用类目">{{
            typeNames
          }}</a-descriptions-item>
          <a-descriptions-item label="发放群体">{{
            groupTypeNames
          }}</a-descriptions-item>
          <a-descriptions-item label="抵扣方式"
            >{{ details.type == 1 ? "满减" : "折扣" }}
            <span v-if="details.type == 1"
              >满{{ details.minAmount }}减{{ details.amount }}</span
            >
            <span v-else>{{ amount }}折</span>
          </a-descriptions-item>
          <a-descriptions-item label="叠加使用">{{
            details.overlayUse == 0 ? "不可叠加" : "可叠加"
          }}</a-descriptions-item>
          <a-descriptions-item label="总发数量">{{
            details.maxNum == 0 ? "无限制" : details.maxNum
          }}</a-descriptions-item>
          <a-descriptions-item label="有效时长"
            >{{ details.validDay }}天</a-descriptions-item
          >
          <a-descriptions-item label="已发数量">{{
            details.grantedNum
          }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{
            details.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="卡券状态"
            ><a-tag color="red">{{
              details.state == 1
                ? "启用"
                : details.state == 2
                ? "禁用"
                : details.state == 3
                ? "已删除"
                : "已发完"
            }}</a-tag></a-descriptions-item
          >
          <a-descriptions-item label="使用规则" :span="3">{{
            details.introduce
          }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { queryCouponConfig } from "@/api/market";
const modalOpen = ref(false);
const couponCategoryArr = ref(["购物券", "鉴定券", "养护券", "找货券"]);
const groupTypeArr = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "新用户",
  },
  {
    id: 2,
    name: "老用户",
  },
  {
    id: 3,
    name: "会员用户",
  },
]);
const goodsTypeLists = ref([]);
const open = (id, list) => {
  goodsTypeLists.value = list;
  modalOpen.value = true;
  getQueryCouponConfig(id);
};
const details = ref({});
const typeNames = ref("");
const groupTypeNames = ref("");
const getQueryCouponConfig = async (id) => {
  const data = await queryCouponConfig({ id });
  details.value = data.data;
  typeNames.value =
    data.data.typeId.join(",") == 0
      ? "全部"
      : goodsTypeLists.value
          .map((v) => {
            if (data.data.typeId.includes(v.id)) {
              return v.name;
            }
          })
          .filter((item) => item != undefined)
          .join("/");
  groupTypeNames.value =
    data.data.groupType.join(",") == 0
      ? "全部"
      : groupTypeArr.value
          .map((v) => {
            if (data.data.groupType.includes(v.id)) {
              return v.name;
            }
          })
          .filter((item) => item != undefined)
          .join("/");
};
// 获取发放群体
defineExpose({ open, modalOpen });
</script>

<style lang="less">
.table-item-layout {
  display: flex;
  align-items: center;
  padding: 24px 0;
  box-sizing: border-box;
  .table-item:last-child {
    border-right: 0px solid #ffffff;
  }
  .table-item {
    width: 20%;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 38px;
    box-sizing: border-box;
    border-right: 1px solid #e8ecf0;
    color: #2b3453;
    font-size: 14px;
    .table-flex {
      display: flex;
      align-items: center;
    }
  }
}

.title-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    color: #000000;
    font-weight: 600;
  }
}

.steps-item {
  display: flex;
  align-items: flex-start;
  .left {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    .round {
      width: 20px;
      height: 20px;
      background: #262e47;
      border-radius: 50%;
    }

    .line {
      width: 2px;
      height: 53px;
      background: #262e47;
    }
  }

  .steps-title {
    color: #2b3453;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .steps-content {
    display: flex;
    align-items: center;
    color: #2b3453;
    font-size: 12px;
    .steps-block {
      margin-right: 55px;

      text {
        color: #1990ff;
        cursor: pointer;
      }
    }
  }
}
</style>
